<template>
	<view>
		<view @touchmove.prevent.stop>
			<uni-popup ref="auth" :custom="true" :mask-click="false">
				<view class="uni-tip">
					<view class="uni-tip-title">您还未登录</view>
					<view class="uni-tip-content">请先登录之后再进行操作</view>
					<view class="uni-tip-icon">
						<image :src="$util.img('/upload/uniapp/member/login.png')" mode="widthFix"></image>
					</view>
					<view class="uni-tip-group-button">
						<button type="default" class="uni-tip-button color-title close" @click="close">暂不登录</button>
						<!-- #ifdef MP-QQ || MP-BAIDU -->
						<button v-if="canIUseGetUserProfile" type="primary" class="uni-tip-button"
							@click="login">立即登录</button>
						<button v-else type="primary" open-type="getUserInfo" @getuserinfo="login"
							class="uni-tip-button">立即登录</button>
						<!-- #endif  -->

						<!-- #ifdef MP-WEIXIN -->
						<button type="primary" class="uni-tip-button" @click="login">立即登录</button>
						<!-- #endif -->

						<!-- #ifdef MP-ALIPAY -->
						<button type="primary" open-type="getAuthorize" scope="userInfo" @getAuthorize="login"
							class="uni-tip-button color-base-bg">立即登录</button>
						<!-- #endif  -->
						<!-- #ifdef H5 || APP-PLUS -->
						<button type="primary" class="uni-tip-button color-base-bg" @click="login">立即登录</button>
						<!-- #endif  -->
					</view>
				</view>
			</uni-popup>
		</view>

		<bind-mobile ref="bindMobile"></bind-mobile>
		<register-reward ref="registerReward"></register-reward>
		<login-pop ref="loginBottom"></login-pop>
	</view>
</template>

<script>
	import loginPop from './login-pop';
	import uniPopup from '../uni-popup/uni-popup.vue';
	import Config from 'common/js/config.js';
	import bindMobile from '../bind-mobile/bind-mobile.vue';
	import registerReward from '../register-reward/register-reward.vue';
	import auth from 'common/js/auth.js';

	export default {
		mixins: [auth],
		name: 'ns-login',
		components: {
			uniPopup,
			bindMobile,
			registerReward,
			loginPop
		},
		data() {
			return {
				url: '',
				registerConfig: {},
				canIUseGetUserProfile: false
			};
		},
		created() {
			this.getRegisterConfig();
			// #ifdef MP-WEIXIN
			if (wx.getUserProfile) this.canIUseGetUserProfile = true;
			// #endif
		},
		mounted() {
			// #ifdef H5
			if (!location.href.includes('plugpages/collection/index') && this.$util.isWeiXin()) { //不包含扫码收款页
				const getUrlCode = function() {
					var url = location.search;
					var theRequest = new Object();
					if (url.indexOf('?') != -1) {
						var str = url.substr(1);
						var strs = str.split('&');
						for (var i = 0; i < strs.length; i++) {
							theRequest[strs[i].split('=')[0]] = strs[i].split('=')[1];
						}
					}
					return theRequest;
				};
				var urlParams = getUrlCode();
				if (urlParams.suid) uni.setStorageSync('suid', urlParams.suid);
				if (urlParams.code != undefined) {
					this.$api.sendRequest({
						url: '/wechat/api/wechat/authcodetoopenid',
						data: {
							code: urlParams.code
						},
						success: res => {
							if (res.code >= 0) {
								let data = {};
								if (res.data.openid) data.wx_openid = res.data.openid;
								if (res.data.unionid) data.wx_unionid = res.data.unionid;
								if (res.data.userinfo) Object.assign(data, res.data.userinfo);
								this.authLogin(data);
							}
						}
					});
				}
			}
			// #endif
		},
		methods: {
			/**
			 * 获取注册配置
			 */
			getRegisterConfig() {
				this.$api.sendRequest({
					url: '/api/register/config',
					success: res => {
						if (res.code >= 0) {
							this.registerConfig = res.data.value;
						}
					}
				});
			},
			open(url) {
				if (url) this.url = url;
				// #ifndef H5
				this.$refs.auth.open();
				// #endif

				// #ifdef H5
				if (this.$util.isWeiXin()) {
					let authData = uni.getStorageSync('authInfo');
					if (authData && authData.wx_openid && !uni.getStorageSync('loginLock')) {
						this.authLogin(authData);
					} else {
						this.$api.sendRequest({
							url: '/wechat/api/wechat/authcode',
							data: {
								redirect_url: location.href
							},
							success: res => {
								if (res.code >= 0) {
									location.href = res.data;
								} else {
									this.$util.showToast({
										title: '公众号配置错误'
									});
								}
							}
						});
					}
				} else {
					this.$refs.auth.open();
				}
				// #endif
			},
			close() {
				this.$refs.auth.close();
			},
			login(e) {
				if (!uni.getStorageSync('loginLock')) {
					// #ifdef MP-QQ || MP-BAIDU
					if (e.detail.errMsg == 'getUserInfo:ok') {
						this.getCode(data => {
							if (data) {
								this.authLogin(data);
							} else {
								this.$refs.auth.close();
								this.toLogin();
							}
						});
					}
					// #endif

					// #ifdef MP-WEIXIN
					// if (this.canIUseGetUserProfile) {
					// 	wx.getUserProfile({
					// 		desc: '获取用户个人信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					// 		success: (res) => {
					// 			if (res.errMsg == 'getUserProfile:ok') {
					// 				this.authInfo.nickName = res.userInfo.nickName;
					// 				this.authInfo.avatarUrl = res.userInfo.avatarUrl;
					// 				uni.setStorageSync('authInfo', this.authInfo)
					// 				this.getCode(data => {
					// 					if (data) {
					// 						this.authLogin(data);
					// 					} else {
					// 						this.$refs.auth.close();
					// 						this.toLogin();
					// 					}
					// 				});
					// 			}
					// 		}
					// 	})					
					// } else if (e.detail.errMsg == 'getUserInfo:ok') {
					// 	this.getCode(data => {
					// 		if (data) {
					// 			this.authLogin(data);
					// 		} else {
					// 			this.$refs.auth.close();
					// 			this.toLogin();
					// 		}
					// 	});
					// }

					this.getCode(data => {
						if (data) {
							if (data.weapp_openid) {
								this.authInfo.weapp_openid = data.weapp_openid;
							}
							if (data.wx_unionid) {
								this.authInfo.wx_unionid = data.wx_unionid;
							}
							this.authInfo.isauth = data.isauth;
							uni.setStorageSync('authInfo', this.authInfo);
							if (data.isauth == 1) { //已授权获取头像昵称
								this.authLogin(this.authInfo);
							} else {
								let userwxmpInfo = uni.getStorageSync('userwxmpInfo');
								if (userwxmpInfo) {
									this.authInfo.nickName = userwxmpInfo.nickName;
									this.authInfo.avatarUrl = userwxmpInfo.avatarUrl;
									uni.setStorageSync('authInfo', this.authInfo);
									this.authLogin(this.authInfo);
								} else {
									this.$refs.auth.close();
									this.$refs.loginBottom.open(); //弹窗填充昵称头像
								}
							}
						} else {
							this.$refs.auth.close();
							this.toLogin();
						}
					});
					// #endif

					// #ifndef MP
					this.$refs.auth.close();
					this.toLogin();
					// #endif
				} else {
					this.$refs.auth.close();
					this.toLogin();
				}
			},
			/**
			 * 跳转去登录页
			 */
			toLogin() {
				if (this.url) this.$util.redirectTo('/otherpages/login/login/login', {
					back: encodeURIComponent(this.url)
				});
				else this.$util.redirectTo('/otherpages/login/login/login');
			},
			/**
			 * 授权登录
			 */
			authLogin(data) {
				uni.showLoading({
					title: '登录中'
				});
				uni.setStorageSync('authInfo', data)
				if (uni.getStorageSync('suid')) data.suid = uni.getStorageSync('suid');

				this.$api.sendRequest({
					url: '/api/login/auth',
					data,
					success: res => {
						this.$refs.auth.close();
						if (res.code >= 0) {
							uni.setStorage({
								key: 'token',
								data: res.data.token,
								success: () => {
									uni.removeStorageSync('loginLock');
									uni.removeStorageSync('unbound');
									uni.removeStorageSync('authInfo');
									this.$store.dispatch('getCartNumber');
									this.$store.commit('setToken', res.data.token);

									if (res.data.is_register && this.$refs.registerReward
										.getReward()) {
										this.$refs.registerReward.open();
									}
								}
							});
							setTimeout(() => {
								uni.hideLoading();
							}, 1000);
						} else if (this.registerConfig.third_party == 1 && this.registerConfig.bind_mobile ==
							1) {
							uni.hideLoading();
							this.$refs.bindMobile.open();
						} else if (this.registerConfig.third_party == 0) {
							uni.hideLoading();
							this.toLogin();
						} else {
							uni.hideLoading();
							this.$util.showToast({
								title: res.message
							});
						}
					},
					fail: () => {
						uni.hideLoading();
						this.$refs.auth.close();
						this.$util.showToast({
							title: '登录失败'
						});
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.uni-tip {
		width: 580rpx;
		background: #fff;
		box-sizing: border-box;
		border-radius: 10rpx;
		overflow: hidden;
		height: initial;
	}

	.uni-tip-title {
		text-align: center;
		font-weight: bold;
		font-size: $font-size-toolbar;
		color: $color-title;
		padding-top: 50rpx;
	}

	.uni-tip-content {
		padding: 0 30rpx;
		color: $color-sub;
		font-size: $font-size-base;
		text-align: center;
	}

	.uni-tip-icon {
		width: 100%;
		text-align: center;
		margin-top: 50rpx;
	}

	.uni-tip-icon image {
		width: 300rpx;
	}

	.uni-tip-group-button {
		margin-top: 30rpx;
		line-height: 120rpx;
		display: flex;
		padding: 0 50rpx 50rpx 50rpx;
		justify-content: space-between;
	}

	.uni-tip-button {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border: none;
		border-radius: 80rpx;
		padding: 0 !important;
		margin: 0 !important;
		background: #fff;
		font-size: $font-size-base;
	}

	.uni-tip-group-button .close {
		border: 1px solid #eee;
	}

	.uni-tip-button:after {
		border: none;
	}
</style>